<template>
	<view class="cart-goods" @click="goDetail(buyData.goods_id)">
		<!-- todo:该组件待修改 -->
		<image class="image" :src="serverUrl+buyData.img_url" mode="widthFix"></image>
		<view class="cart-goods-info">
			<view class="goods-info-top">
				<view>{{buyData.name}}</view>
				<slot>
					<view class="goods-info-size" @click.stop="openPopup(item)">
						{{buyData.size}}
						<uni-icons type="bottom" size="16" color="#999"></uni-icons>
					</view>
				</slot>
			</view>

			<view class="goods-info-bottom">
				<view class="goods-info-price"><text style="font-size: 25rpx">￥</text>{{buyData.price}}</view>
				<view @click.stop>
					<uni-number-box min="1" max="10" v-model="buyNum" :disabled="disabled">
					</uni-number-box>
				</view>
			</view>
		</view>
		<!-- 选择规格弹出框 -->
		<view @click.stop>
			<uni-popup ref="popup" type="bottom">
				<add-cart :isCartPage="true" :goodsData="goodsData" :active="active" @handleSize='handleActive'
					@clickOkBtn="changeSizeOk">
				</add-cart>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		name: "cart-goods",
		props: {
			buyData: {
				type: Object,
				default: {},
			},
			isLeave: {
				type: Boolean,
				default: true,
			}
		},
		data() {
			return {
				buyNum: 1, // 商品数量
				active: -1, // 当前商品规格索引
				goodsData: {}, // 当前购物车商品所属商品id
				disabled: false, // 数字输入框是否禁用
			};
		},
		watch: {
			buyData: {
				handler(newVal, oldVal) {
					// 为商品数量赋值
					this.buyNum = newVal.buy_num;
				},
				immediate: true,
				deep: true
			},
			buyNum(newVal) {
				let {
					buy_num,
					_id
				} = this.buyData;
				if (newVal !== buy_num) {
					if (!this.isLeave) {
						// 派发action
						this.$store.commit('SET_ITEM_BUYNUM', {
							_id,
							buy_num: newVal
						})
						return
					}
					this.disabled = true;
					// 修改数量成功后通知父组件更新数据
					uni.$http.reqCartModCount(_id, newVal).then((data) => {
						this.$emit('uploadCartList', 'a', buy_num);
						this.disabled = false;
					})
				}
			}
		},
		methods: {
			// 打开选择规格弹出层
			async openPopup() {
				let {
					goods_id,
					size
				} = this.buyData;
				let {
					statusCode,
					data
				} = await uni.$http.reqGoodsDetailByid(goods_id);
				if (statusCode == 200) {
					this.goodsData = data;
				}
				data.types.forEach((item, i) => { // 获取当前规格索引
					if (item.size == size) {
						this.active = i;
					}
				})
				this.$refs.popup.open()
			},
			// 切换选中规格
			handleActive(i) {
				this.active = this.active == i ? -1 : i;
			},
			// 选中规格点击确定
			async changeSizeOk({
				size,
				price
			}) {
				if (size == this.buyData.size) {
					this.$refs.popup.close();
					return
				}
				// 定义发请求所携带的参数
				let data = {
					goods_id: this.buyData.goods_id,
					user_id: this.user_id,
					_id: this.buyData._id,
					price,
					size,
				}
				await uni.$http.reqCartModSize(data);
				// 通知父组件更新数据
				this.$emit('uploadCartList');
				this.$refs.popup.close();
			},
			// 跳转至商品详情页
			goDetail(goods_id) {
				if (!this.isLeave) return;
				uni.navigateTo({
					url: `/subpkg/goods-detail/goods-detail?goodsId=${goods_id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.cart-goods {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.image {
		width: 180rpx;
		height: 180rpx;
		border-radius: 10rpx;
	}

	.cart-goods-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 200rpx;
		padding-left: 30rpx;

		.goods-info-top {
			.goods-info-size {
				display: flex;
				justify-content: space-between;
				width: 120rpx;
				padding: 0 15rpx;
				margin-top: 20rpx;
				color: #999;
				font-size: 25rpx;
				background-color: #f7f8fa;
			}
		}

		.goods-info-bottom {
			display: flex;
			justify-content: space-between;

			.goods-info-price {
				color: $my-tawny;
				font-weight: 700;
			}
		}

	}
</style>
